<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模拟购物车</title>
		<link rel="stylesheet" href="css/iconfont/iconfont.css">
		<link rel="stylesheet" href="css/public.css">
		<link rel="stylesheet" href="css/homework3.css">
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<!-- 头部导航 -->
		<div id="root">
			<div class="top" >
				<div class="topContainer">
					<!-- logo部分 -->
					<div class="left">
						<div class="topContainer_logo">
							<a href="#"><img src="img/logo-mi2.png" alt=""></a>
						</div>
						<!-- logo部分 end-->
						<!-- 标题部分 -->
						<div class="topContainer_title">
							<h2>我的购物车</h2>
							<p>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</p>
						</div>
						<!-- 标题部分 end-->
					</div>
					<div class="right">
						<div class="right_title">
							<a href="#">
								<span class="name">℡52Hz★</span><i class="iconfont icon-sanjiaodown"></i>
								<div class="menue">
									<ul class="page_menue" >
										<li v-for="item in submenu">
											<a :href="item.url">
												{{item.name}}
											</a>
										</li>
									</ul>
								</div>
							</a>
						</div>
						<span class="line">|</span>
						<span class="order"><a href="#">我的订单</a></span>
					</div>
				</div>
			</div>
			<!-- 头部导航 end-->
			<!-- 产品部分 -->
			<div class="page_product">
				<div class="product_containter">
					<!-- 商品名称 -->
					<div class="product_title">
						<div class="product_titleLeft">
							<input type="checkbox" class="select" @click="selectProduct(isSelectAll)" :checked="isSelectAll"/>
							<p class="all">全选</p>
							<div class="blank">&nbsp;</div>
							<div class="name">商品名称</div>
						</div>
						<ul class="product_titleRight">
							<li v-for="productTitle in productTiles">
								<p>{{productTitle.title}}</p>
							</li>
						</ul>
					</div>
					<!-- 商品名称 -->
					<hr style="width: 1300px;border: 1px #999 solid;">
					<!-- 商品 -->
					<div class="product_List">
						<ul class="productUl">
							<li v-for="(item,index) in productList" class="productLi" :key="item.id" :class="{obg:(index+1)%2===0}">
								<!-- 选择 -->
								<input type="checkBox" class="select1" :checked="item.isSelect" @click="item.isSelect=!item.isSelect"/>
								<!-- 选择 end-->
								<!-- 商品图片 -->
								<img :src="item.pic.src" >
								<!-- 商品图片 end-->
								<!-- 商品名称 -->
								<h3 class="prolist_title"><a :href="item.url">{{item.proName}}</a></h3>
								<!-- 商品名称 end-->
								<!-- 商品价格 -->
								<div class="price">{{item.price}}</div>
								<!-- 商品价格 end-->
								<!-- 选择商品数量 -->
								<div class="product_num">
									<div class="change_num">
										<a href="#" @click="item.num>1?item.num-=1:1"><i class="iconfont icon-jianhao" ></i></a>
										<input type="text" autocomplete="off" class="Num" :value="item.num">
										<a href="#" @click="item.num+=1"><i class="iconfont icon-tianjia" ></i></a>
									</div>
								</div>
								<!-- 选择商品数量 -->
								<!-- 商品小计 -->
								<div class="pro_total">
									{{(item.price*item.num).toFixed(2)}}
								</div>
								<!-- 商品小计 end-->
								<!-- 删除商品-->
								<div class="pro_del" @click="deleteA(item)">
									<i class="iconfont icon-cuo"></i>
								</div>
								<!-- 删除商品end-->
							</li>
						</ul>
					</div>
					<!-- 商品 end-->
				</div>
				<!-- 产品部分 end-->
				<!-- 总计 -->
				<div class="proSum">
					<div class="proSum_left">
						<a href="#">继续购物</a>
						<span class="proSum_leftSelect">
							已选择<strong class="selectNum">{{getTotal.totalNum}}</strong>件
						</span>
					</div>
					<div class="proSum_right">
						<span class="proSum_rightPrice">
							合计<em>{{getTotal.totalPrice.toFixed(2)}}</em>元
							<a href="#" class="btn_price">去结算</a>
						</span>
					</div>
				</div>
				<!-- 总计 end-->
			</div>
		</div>
		
		<script>
			const app=Vue.createApp({
				data(){
					return{
						submenu:[
							{name:'个人中心',url:'#'},
							{name:'评价晒单',url:'#'},
							{name:'我的喜欢',url:'#'},
							{name:'小米账户',url:'#'},
							{name:'退出登录',url:'#'}
						],
						productTiles:[
							{title:'单价'},
							{title:'数量'},
							{title:'小计'},
							{title:'操作'}
						],
						productList:[
							{
								pic:{src:'img/pro_pic1.jpg'},
								proName:'适配T300/T500/T500C 声波电动牙刷头（敏感型）3支  白色',
								price:'69',
								url:"#",
								num:1
							},
							{
								pic:{src:'img/pro_pic2.jpg'},
								proName:'小米净水器滤芯 PP棉  白色',
								price:'59',
								url:"#",
								num:1
							},
							{
								pic:{src:'img/pro_pic3.webp'},
								proName:'米家便携吹风机H101  白色',
								price:'99',
								url:"#",
								num:1
							},
							{
								pic:{src:'img/pro_pic4.webp'},
								proName:'小米GaN充电器Type-C 33W 单体版  白色',
								price:'109',
								url:"#",
								num:1
							},
							{
								pic:{src:'img/pro_pic5.webp'},
								proName:'小米真无线蓝牙耳机Air2 SE  白色',
								price:'219',
								url:"#",
								num:1
							}
						],
					}
				},
				methods:{
					selectProduct:function(_isSelect){
						//遍历productList，全部取反
						for (var i = 0, len = this.productList.length; i < len; i++) {
						    this.productList[i].isSelect = !_isSelect;
						}
					},
					
					//删除单项商品
					deleteA(phone) {
						var isDelete = confirm("确认删除吗？")
						if (isDelete) {
						    var index = this.productList.indexOf(phone)
						    this.productList.splice(index, 1)
						}
					},
					//减少商品数量
					reduce(phone){
						if(phone.num>1){
							phone.num--;
						}
						else{
							phone.num=1;
						}
					},
					//增加商品数量
					add(phone){
						phone.num++;
					},
				},
				computed:{
					//检测是否全选
					isSelectAll:function(){
					    //如果productList中每一条数据的isSelect都为true，返回true，否则返回false;
					    return this.productList.every(function (val) { return val.isSelect});
					},
					getTotal:function(){
						var prolist = this.productList.filter(function (val) { 
							return val.isSelect}),
						totalPri = 0;
						for (var i = 0,len = prolist.length; i < len; i++) {
							totalPri+=prolist[i].price*prolist[i].num;
						}
						return {totalNum:prolist.length,totalPrice:totalPri}
					}            
					
				},
				/* filters:{
					priceFilter(e){
					    return e.toFixed(2)
					}
				}, */
			});
			const vm=app.mount("#root");
		</script>
	</body>
</html>